import React from 'react';
import { Modal, Form, Input, Select } from 'antd';
import './index.scss';

const Option = Select.Option;
const { TextArea } = Input;
const AddEditForm = Form.create()(
  (props) => {
    const { form } = props;
    const { getFieldDecorator } = form;

    return (
      <Form >
        <FormItem
          label="步骤名称:"
        >
          {
            getFieldDecorator('item', {
            })(
              <Input placeholder="请输入步骤名称" className="input" style={{ width: 260 }} />
            )
          }
        </FormItem>
        <FormItem
          label="具体内容:"
        >
          {
            getFieldDecorator('item', {
            })(
              <TextArea placeholder="请输入具体内容" rows={4} style={{ width: 460, height: 150 }} />
            )
          }
        </FormItem>
        <FormItem
          label="处理方式:"
        >
          {
            getFieldDecorator('type', {
              initialValue: '',
            })(
              <Select className="select" placeholder="请选择" style={{ width: 260 }} >
                <Option value="1">方式一</Option>
                <Option value="2">方式二</Option>
                <Option value="3">方式3</Option>
              </Select>
            )
          }
        </FormItem>
      </Form>
    );
  }
);
const FormItem = Form.Item;
class AddModal extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }
  show() {
    this.setState({ visible: true }, () => {
      this.form.resetFields();
    });
  }
  close() {
    this.setState({
      visible: false,
    });
  }
  onOk() {
 //   console.log(this.form.getFieldsValue());
    this.close();
  }
  onCancel() {
    this.close();
  }
  render() {
    return (
      <Modal
        title="添加步骤"
        wrapClassName="vertical-center-modal"
        visible={this.state.visible}
        className="add-modal"
        onOk={this.onOk.bind(this)}
        onCancel={this.onCancel.bind(this)}
        width={850}
        okText="发送"
      >
        <div className="form-wrap">
          <AddEditForm
            ref={(ref) => {
              this.form = ref;
            }}
          />
        </div>
      </Modal >
    );
  }
}

export default AddModal;

